function web_createRGB(oriCol) {
    return 'rgba(' + oriCol.x + ' , ' + oriCol.y + ' , ' + oriCol.z + ' , ' + oriCol.w + ' ) ';
}

function web_createTextAlignment(oriTextAlignment) {
    if (oriTextAlignment == 'TextAlignmentCenter') {
        return 'center';
    }
    else if (oriTextAlignment == 'TextAlignmentLeft') {
        return 'left';
    }
    else if (oriTextAlignment == 'TextAlignmentRight') {
        return 'right';
    }
}

function web_parseWithSuperView(superView_web, subViews) {
    var retFirstView = null;
    subViews.forEach(jsView => {

        var view_web;
        var clsName = jsView._clsName;

        if (clsName == 'View' || clsName == 'Cell') {
            view_web = document.createElement('div');
        }
        else if (clsName == 'Label') {
            view_web = document.createElement('p');
            view_web.innerHTML = jsView.text;
            view_web.style.color = web_createRGB(jsView.textColor);
            view_web.style.textAlign = web_createTextAlignment(jsView.textAlignment);
            // ((Model4VRTLabel*)view).fontSize = [jsView[@"fontSize"] unsignedIntegerValue] * 1.0f * kFontPx2PtScale;
        }
        else if (clsName == 'ImgView') {
            view_web = document.createElement('img');
            view_web.src = jsView.imageUrl;
        }
        else if (clsName == 'TextField') {
            view_web = document.createElement('input');
            view_web.type = 'text';
            view_web.innerHTML = jsView.text;
            view_web.style.color = web_createRGB(jsView.textColor);
            view_web.style.textAlign = web_createTextAlignment(jsView.textAlignment);
            view_web.oninput = function () {
                _api_responseTextFieldReturn(jsView._vrtId + 'CallBackDidChange', view_web.value);
            }
            // ((Model4VRTTextField*)view).fontSize = [VRT_SAFE_VALUE(jsView[@"fontSize"]) unsignedIntegerValue] * 1.0f * kFontPx2PtScale;
        }
        else if (clsName == 'List') {
            view_web = document.createElement('div');
        }

        if (view_web != null) {
            if (!retFirstView) {
                retFirstView = view_web;
            }
            // superView_web.appendChild(view_web);
            superView_web.appendChild(view_web);
            web_parseCommonProperty(view_web, jsView);
            web_parseWithSuperView(view_web, jsView.subViews);
        }
    });
    return retFirstView;
}

function web_parseCommonProperty(view_web, view_js) {
    view_web.id = view_js._vrtId;
    view_web.style.position = 'absolute';
    view_web.style.left = (view_js._x / 2.0) + 'px';
    view_web.style.top = (view_js._y / 2.0) + 'px';
    view_web.style.width = (view_js._width / 2.0) + 'px';
    view_web.style.height = (view_js._height / 2.0) + 'px';

    view_web.style.backgroundColor = web_createRGB(view_js.backgroundColor);
    view_web.style.borderRadius = (view_js.cornerRadius / 2.0) + 'px';
    view_web.style.margin = '0px';
    view_web.style.padding = '0px';
    view_web.style.borderWidth = '0px';

    if (view_js._enabledUserInteraction) {
        view_web.onclick = function () {
            web_basicCallBack(view_js._vrtId);
        };
    }
}


function web_renderScript(code) {
    _clearCache();
    if (web_renderTarget) {
        web_body.removeChild(web_renderTarget);
    }
    if (_scriptModule) {
        document.body.removeChild(_scriptModule);
    }
    _scriptModule = document.createElement('script');
    _scriptModule.id = 'scriptModule';
    _scriptModule.typt = 'text/javascript';
    _scriptModule.text = code;
    document.body.appendChild(_scriptModule);

    _api_responseBasicCallBack('CallBackViewDidLoad');
    _api_responseBasicCallBack('CallBackViewWillAppear');
    _api_responseBasicCallBack('CallBackViewDidAppear');
}

function web_toSingleParams(obj) {
    let param = "";
    for (const name in obj) {
        if (typeof obj[name] !== 'function') {
            if (obj[name]) {
                param += "&" + name + "=" + obj[name];
            } else {
                param += "&" + name + "=";
            }
        }
    }
    return param.substring(1)
}

function web_basicCallBack(key) {
    _api_responseBasicCallBack(key);
}

//gValue
var _scriptModule;
var web_vrtId = -2;
var web_body = document.getElementById('box-show');
var web_renderTarget = null;

var web_list_numOfSections = -1;
var web_list_cell_cache = {};

var web_pageParam = {};

function api_commitVC(mainVC) {
    web_vrtId = mainVC._vrtId;
    document.title = mainVC.title;

    var view_js = mainVC.view;

    web_renderTarget = document.createElement('div');
    web_renderTarget.style.position = 'absolute';
    web_renderTarget.style.width = 375.0 + 'px';
    web_renderTarget.style.height = 667.0 + 'px';
    web_renderTarget.style.backgroundColor = web_createRGB(view_js.backgroundColor);
    web_renderTarget.id = view_js._vrtId;
    web_body.appendChild(web_renderTarget);
    web_parseWithSuperView(web_renderTarget, view_js.subViews);

}

function api_refreshView(vrtId, key, value) {
    var target = document.getElementById(vrtId);
    if (target) {
        var targetSty = target.style;
        if (key == '_x') {
            targetSty.left = value + 'px';
        }
        else if (key == '_y') {
            targetSty.top = value + 'px';
        }
        else if (key == '_height') {
            targetSty.height = value + 'px';
        }
        else if (key == '_width') {
            targetSty.width = value + 'px';
        }
        else if (key == 'backgroundColor') {
            targetSty.backgroundColor = web_createRGB(value);
        }
        else if (key == 'cornerRadius') {
            targetSty.borderRadius = value + 'px';
        }
        else if (key == 'text') {
            target.innerHTML = value;
        }
        else if (key == 'fontSize') {

        }
        else if (key == 'textColor') {
            targetSty.color = web_createRGB(value);
        }
        else if (key == 'imageUrl') {
            target.src = value;
        }
        else if (key == 'textAlignment') {
            targetSty.textAlign = web_createTextAlignment(value);
        }
    }
}

function api_refreshListData(vrtId, numberOfSections, offset, length, rowDataAtSection) {
    var curTop = 0;
    var list = document.getElementById(vrtId);

    if (list == null) {
        return;
    }

    var cns = new Array(list.childNodes.length);

    list.childNodes.forEach(node => {
        cns.push(node);
    });

    cns.forEach(node => {
        list.removeChild(node);
    });

    var ptrDatas = null;
    if (offset >= 0) {
        if (web_list_numOfSections > offset) {
            var listData = web_list_cell_cache[vrtId];

            if (listData) {
                ptrDatas = listData;
                listData[offset + ''] = rowDataAtSection[offset + ''];
            }
        }
    }
    else {
        ptrDatas = rowDataAtSection;
        web_list_cell_cache[vrtId] = rowDataAtSection;
    }

    if (ptrDatas == null) {
        return;
    }

    for (var i = 0; i < numberOfSections; i++) {
        var rowDatas = ptrDatas[i + ''];
        if (rowDatas) {
            for (var j = 0; j < rowDatas.length; j++) {
                var rowData = rowDatas[j];
                rowData._y = curTop;
                let cellView = web_parseWithSuperView(list, [rowData]);
                let section = i, row = j;
                cellView.onclick = function () {
                    _api_responseListDidSelectRow(vrtId + 'CallBackDidSelectRowAtIndexPath', section, row);
                };
                curTop += rowData._height;
            }
        }
    }
    list.style.height = curTop + 'px';
    web_list_numOfSections = numberOfSections;
}

function api_platform() {
    return 'web_debugger';
}

function api_log(logInfo) {
    console.log(logInfo);
}

function api_httpRequest(httpRequest) {
    var xhr = new XMLHttpRequest(),
        method = "POST",
        url = httpRequest.url;
    xhr.open(method, url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            _api_httpResponse(httpRequest.url, JSON.parse(xhr.responseText), '');
        }
    }

    var paramStr = web_toSingleParams(httpRequest._param);

    xhr.send(paramStr);
}

function api_getThisNavigationComp() {

}

function api_pushUrlWithParam(url, param) {
    web_pageParam = param;
    var xhr = new XMLHttpRequest(),
        method = "GET";
    xhr.open(method, url, false);
    xhr.send(null);
    web_renderScript(xhr.responseText);
}

function api_popThis() {

}

function api_getPushedParam() {
    return web_pageParam;
}

function api_showAlert() {

}

//web_only_api
var web_editorElement = null;

var web_cur_userId = -1;

var web_cur_projId = -1;

var web_cur_pageId = -1;

function api_webOnly_registerEditor(editor) {
    web_editorElement = editor;
}

function api_webOnly_showPageCodeToEditor() {
    if (web_editorElement) {
        web_editorElement.setValue(_scriptModule.text);
    }
}